import { defineAsyncComponent } from 'vue';
const components = import.meta.glob('@/visual/components/**/*.vue');
import { useVisualCompStore } from '@/visual/js/visual-comp';

export default function install(app) {
  const visualComp = useVisualCompStore();
  Object.entries(components).forEach(async ([key, value]) => {
    let paths = key.replace('/src/visual/components/', '').split('/');
    const name = getName('vc-', paths);
    app.component(name, defineAsyncComponent(value));
    visualComp.setVisualComp(name, {name: name, styleList: []});
  });
}

function getName(prefix, paths) {
  let name = prefix + paths[0];
  for (let i=1;i<paths.length;i++) {
    if (paths[i] !== 'index.vue') {
      name += '-' + paths[i].replace('.vue', '');
    }
  }
  name = name.replace(/[A-Z]/g, function(str) {
    return '-' + str.toLowerCase();
  });
  return name;
}